<!-- 
    第一种：window.onload = function(){}
或者 
window.addEventListener("load",function(){});

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等)
, 就调用的处理函数

注意：
1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。
3. 如果使用 addEventListener 则没有限制


第二种：document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
Ie9以上才支持
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。



 -->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // window.onload = function () {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function () {
        //         alert('点击我')
        //     })
        // }

        window.addEventListener('load', function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('点击我')
            })

        })

        /* 第一种 */
        window.addEventListener('load', function () {
            alert(22);

        })
        /* 第二种 */
        document.addEventListener('DOMContentLoaded', function () {
            alert(33);
        })

        //load 事件等页面内容全部加载完毕，包含页面的dom元素，图片 flash,css等
        //DOMContentLoaded 是等dom加载完毕，不包含图片 flash css 加载速度比load快




    </script>
    <button> 点击</button>
</body>

</html>